/* @TODO: use backdrop-filter: blur(6px); instead of '.overlayed' body class when in full support */
.m-overlay {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: 149;
}
.m-menu-select .dropdown-item i {
    margin: 0;
}
.m-tabs > div {
    position: relative;
    color: var(--text-color-high);
    white-space: nowrap;
    cursor: pointer;
}
.m-tabs > div::after {
    transition: all 0.3s cubic-bezier(1, 0, 0, 1);
    will-change: transform, box-shadow, opacity;
    position: absolute;
    content: "";
    height: 3px;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--mobile-border-brand);
    border-radius: 0;
    opacity: 0;
    transform: scale(0, 1);
}
.m-tabs > div.active::after {
    opacity: 1;
    transform: scale(1, 1);
}
.cursor-pointer {
    cursor: pointer;
}
i.rot-90::before,
span.rot-90::before {
    transform: rotate(90deg);
}
.scale-75 {
    scale: 0.75;
}
.me-1 {
    margin-inline-end: 0.25rem;
}
.me-2 {
    margin-inline-end: 0.5rem;
}
.me-3 {
    margin-inline-end: 0.75rem;
}
.ms-2 {
    margin-inline-start: 0.5rem;
}
.ms-3 {
    margin-inline-start: 0.75rem;
}
.ml-auto {
    margin-left: auto;
}
.-ml-18 {
    margin-left: -4.5rem;
}
.ml-1 {
    margin-left: 0.25rem;
}
.ml-3 {
    margin-left: 0.75rem;
}
.mr-2 {
    margin-right: 0.5rem;
}
.mr-4 {
    margin-right: 1rem;
}
.mt-0 {
    margin-top: 0;
}
.mt-1 {
    margin-top: 0.25rem;
}
.mt-2 {
    margin-top: 0.5rem;
}
.mt-4 {
    margin-top: 1rem;
}
.mt-16 {
    margin-top: 4rem;
}
.mt-24 {
    margin-top: 6rem;
}
.mb-0 {
    margin-bottom: 0;
}
.mb-2 {
    margin-bottom: 0.5rem;
}
.mb-4 {
    margin-bottom: 1rem;
}
.mb-8 {
    margin-bottom: 2rem;
}
.mb-10 {
    margin-bottom: 2.5rem;
}
.my-0 {
    margin-top: 0;
    margin-bottom: 0;
}
.my-1 {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
}
.my-2 {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}
.my-4 {
    margin-top: 1rem;
    margin-bottom: 1rem;
}
.mx-1 {
    margin-left: 0.25rem;
    margin-right: 0.25rem;
}
.mx-2 {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}
.mx-4 {
    margin-left: 1rem;
    margin-right: 1rem;
}
.mx-auto {
    margin-left: auto;
    margin-right: auto;
}
.-mx-4 {
    margin-left: -1rem;
    margin-right: -1rem;
}
.p-0 {
    padding: 0;
}
.p-1 {
    padding: 0.25rem;
}
.p-2 {
    padding: 0.5rem;
}
.p-3 {
    padding: 0.75rem;
}
.p-4 {
    padding: 1rem;
}
.p-6 {
    padding: 1.5rem;
}
.pt-1 {
    padding-top: 0.25rem;
}
.pt-2 {
    padding-top: 0.5rem;
}
.pt-4 {
    padding-top: 1rem;
}
.pt-6 {
    padding-top: 1.5rem;
}
.pt-8 {
    padding-top: 2rem;
}
.pt-full {
    padding-top: 100%;
}
.pb-2 {
    padding-bottom: 0.5rem;
}
.pb-4 {
    padding-bottom: 1rem;
}
.pb-6 {
    padding-bottom: 1.5rem;
}
.pb-16 {
    padding-bottom: 4rem;
}
.pb-20 {
    padding-bottom: 5rem;
}
.pr-2 {
    padding-right: 0.5rem;
}
.pr-4 {
    padding-right: 1rem;
}
.pr-8 {
    padding-right: 2rem;
}
.pr-28 {
    padding-right: 7rem;
}
.pl-1 {
    padding-left: 0.25rem;
}
.pl-2 {
    padding-left: 0.5rem;
}
.pl-3 {
    padding-left: 0.75rem;
}
.pl-4 {
    padding-left: 1rem;
}
.ps-2 {
    padding-inline-start: 0.5rem;
}
.ps-6 {
    padding-inline-start: 1.5rem;
}
.pe-6 {
    padding-inline-end: 1.5rem;
}
.px-1 {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}
.px-2 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}
.px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}
.px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}
.px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}
.px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
.px-7 {
    padding-left: 1.75rem;
    padding-right: 1.75rem;
}
.mobile .mob-px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
.px-12 {
    padding-left: 3rem;
    padding-right: 3rem;
}
.py-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}
.py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
.py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}
.py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}
.w-0 {
    width: 0;
}
.w-12 {
    width: 3rem;
}
.w-32 {
    width: 8rem;
}
.w-40 {
    width: 10rem;
}
.w-80 {
    width: 20rem;
}
.w-80 {
    width: 20rem;
}
.h-7 {
    height: 1.75rem;
}
.h-10 {
    height: 2.5rem;
}
.h-12 {
    height: 3rem;
}
.h-18 {
    height: 4.5rem;
}
.h-20 {
    height: 5rem;
}
.h-24 {
    height: 6rem;
}
.h-28 {
    height: 7rem;
}
.h-32 {
    height: 8rem;
}
.h-40 {
    height: 10rem;
}
.h-48 {
    height: 12rem;
}
.h-60 {
    height: 15rem;
}
.w-full {
    width: 100%;
}
.h-full {
    height: 100%;
}
.w-min-content {
    width: min-content;
    -moz-width: min-content;
}
.max-h-0 {
    max-height: 0;
}
.max-h-48 {
    max-height: 12rem;
}
.max-h-60 {
    max-height: 15rem;
}
.max-h-100 {
    max-height: 25rem;
}
.max-w-24 {
    max-width: 6rem;
}
.max-w-80 {
    max-width: 20rem;
}
.max-w-full {
    max-width: 100%;
}
.size-8 {
    width: 2rem;
    height: 2rem;
}
.overflow-hidden {
    overflow: hidden;
}
.overflow-y-hidden {
    overflow-y: hidden;
}
.whitespace-nowrap {
    white-space: nowrap;
}
.m-dropdown-item {
    --mask-color: var(--icon-rest);
    align-items: center;
    box-sizing: border-box;
    color: var(--text-color-medium);
    cursor: pointer;
    display: flex;
    height: 32px;
    font-size: 14px;
    padding: 0 8px;
    overflow: hidden;
    max-width: 100%;
    position: relative;
    text-overflow: ellipsis;
    text-align: initial;
    transition: var(--transition-color), var(--transition-bg-color);
    white-space: nowrap;
    width: auto;
}
.m-dropdown-item:hover,
.m-dropdown-item.opened {
    --mask-color: var(--icon-active);
    background: var(--button-hover);
    color: var(--text-color-high);
}
.m-dropdown-item.contains-submenu.icon-arrow-right-after::after {
    height: 16px;
    width: 8px;
    margin-inline-start: 8px;
}
.m-dropdown-item.contains-submenu.icon-arrow-right-after:hover::after,
.m-dropdown-item.contains-submenu.icon-arrow-right-after.opened::after {
    color: var(--icon-active);
}
.m-dropdown-item i {
    --icon-size: 24px;
}
body.rtl .m-dropdown-item i.mr-0 {
    margin-left: 0;
}
body.rtl .m-dropdown-item i.ml-0 {
    margin-right: 0;
}
body.rtl .m-dropdown-item i.mr-4 {
    margin-left: 1rem;
}
body.rtl .m-dropdown-item i.ml-3 {
    margin-right: 0.75rem;
}
body.rtl .rtl-rot-180 {
    transform: rotate(180deg);
}
.m-dropdown-item:not(.item-bold) {
    font-family: var(--text-font-family);
}
.m-dropdown-item.item-bold {
    font-family: var(--text-font-family);
    font-weight: bold;
}
.m-dropdown-item-label {
    font-size: 12px;
}
.content-visibility-auto {
    content-visibility: auto;
}
.block {
    display: block;
}
.flex {
    display: flex;
}
.flex-center {
    align-items: center;
    justify-content: center;
}
.flex-column {
    flex-direction: column;
}
.flex-1 {
    flex-grow: 1;
}
.flex-row {
    flex-direction: row;
}
.flex-wrap {
    flex-wrap: wrap;
}
.flex-row-reverse {
    flex-direction: row-reverse;
}
body.rtl .flex-row,
body.rtl .flex-row-reverse {
    direction: rtl;
}
.col-span-full {
    grid-column: 1 / -1;
}
.justify-between {
    justify-content: start;
}
.justify-between {
    justify-content: space-between;
}
.justify-center {
    justify-content: center;
}
.justify-end {
    justify-content: end;
}
.items-center {
    align-items: center;
}
.text-ellipsis {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.text-ellipsis-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.text-center {
    text-align: center;
}
.text-left {
    text-align: left;
}
body.rtl .text-left {
    text-align: right;
}
.text-right {
    text-align: right;
}
body.rtl .text-right {
    text-align: left;
}
.font-600 {
    font-weight: 600;
}
.font-bold {
    font-weight: bold;
}
.font-body-1 {
    font: var(--text-body1);
}
.font-body-1-bold {
    font: var(--text-body1-bold);
}
.font-body-2 {
    font: var(--text-body2);
}
.font-title-h2-bold {
    font: var(--text-h2-bold);
}
.font-title-h3 {
    font: var(--text-h3);
}
.font-title-h3-bold {
    font: var(--text-h3-bold);
}
.icon-size-3 {
    --icon-size: 12px;
}
.icon-size-4 {
    --icon-size: 16px;
}
.icon-size-5 {
    --icon-size: 20px;
}
.icon-size-6 {
    --icon-size: 24px;
}
.icon-size-8 {
    --icon-size: 32px;
}
.icon-size-14 {
    --icon-size: 56px;
}
.icon-size-16 {
    --icon-size: 64px;
}
.skeleton {
    background-color: #E5E5E5;
    animation: fadeInOutLoopSubtle 2s linear infinite;
}
.transition-max-h {
    transition: max-height 0.3s ease-in-out;
}
.transition-colors {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 0.2s;
}
.transition-opacity {
    transition: opacity 0.3s ease-in-out;
}
.mega-dialog.m-dialog {
    animation: dialogpopin 0.3s ease;
    overflow: hidden;
}
.mega-dialog.m-dialog h3 {
    font-weight: 400;
    margin: 1.5rem 0 0.8rem;
    overflow: hidden;
    padding: 0 3rem;
    width: 100%;
}
.mega-dialog.m-dialog i.icon-left {
    position: absolute;
    top: 1.5rem;
    left: 1.75rem;
}
body.rtl .mega-dialog.m-dialog i.icon-left {
    right: 1.75rem;
}
.mega-dialog.m-dialog.with-icon {
    padding-left: 4.5rem;
}
body.rtl .mega-dialog.m-dialog.with-icon {
    padding-right: 4.5rem;
}
.mega-dialog button.m-dialog-close {
    top: 1.5rem;
    right: 1.5rem;
}
.m-dialog-overlay {
    animation: fadein 0.3s ease;
}
.grid {
    display: grid;
}
.grid-flow-col {
    grid-auto-flow: column;
}
.grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.m-context-menu .m-dropdown-item.red i {
    --mask-color: var(--secondary-red);
}
i.text-color-medium {
    --mask-color: var(--text-color-medium);
}
i.green-check-circle {
    --mask-color: var(--secondary-white);
    background: var(--checkbox-fill-active);
    border-radius: 100%;
}
.toast-rack .green-check-circle {
    --icon-size: 16px;
}
.rotating {
    animation: rotate 0.8s infinite linear;
}
.bg-surface-grey-1 {
    background: var(--surface-grey-1);
}
.bg-surface-grey-2 {
    background: var(--surface-grey-2);
}
.bg-mobile-surface-grey-1 {
    background: var(--mobile-surface-1);
}
.bg-surface-main {
    background: var(--surface-main);
}
.bg-banner-success {
    background: var(--banner-background-success);
}
.bg-banner-info {
    background-color: var(--banner-background-info);
}
.bg-it {
    background-color: var(--mobile-brand-it);
}
.bg-btn-secondary,
.hoverable:hover {
    background-color: var(--mobile-button-secondary);
}
.bg-inherit {
    background: inherit;
}
.bg-no-repeat {
    background-repeat: no-repeat;
}
.bg-center {
    background-position: center;
}
.bg-contain {
    background-size: contain;
}
.text-color-medium {
    color: var(--text-color-medium);
}
.text-color-high {
    color: var(--text-color-high);
}
.text-color-primary {
    color: var(--mobile-text-primary);
}
.text-color-primary-link {
    color: var(--mobile-link-primary);
}
.text-color-secondary {
    color: var(--mobile-text-secondary);
}
.text-color-white {
    color: var(--text-color-white-high);
}
.border-radius-1 {
    border-radius: var(--mobile-border-radius-small);
}
.border-radius-2 {
    border-radius: var(--mobile-border-radius-medium);
}
.border-radius-3 {
    border-radius: var(--mobile-border-radius-large);
}
.border-1 {
    border: 1px solid var(--mobile-border-strong);
}
.border-none {
    border: none;
}
.border-b {
    border-bottom: 1px solid var(--mobile-border-strong);
}
.border-t-none {
    border-top: none;
}
.border-x-none {
    border-left: none;
    border-right: none;
}
.border-drop {
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' opacity='0.2' rx='8' ry='8' stroke='%23333' stroke-width='4' stroke-dasharray='1%2c 9' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
    border-radius: 8px;
}
.outline-none {
    outline: none;
}
.theme-dark .border-drop {
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' opacity='0.2' rx='8' ry='8' stroke='%23999' stroke-width='4' stroke-dasharray='1%2c 9' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
    border-radius: 8px;
}
.white-space-nowrap {
    white-space: nowrap;
}
.relative,
.separator-before {
    position: relative;
}
.absolute {
    position: absolute;
}
.-top-10 {
    top: -2.5rem;
}
.-top-8 {
    top: -2rem;
}
.top-0 {
    top: 0;
}
.right-0 {
    right: 0;
}
.right-2 {
    right: 0.5rem;
}
.-right-1 {
    right: -4px;
}
.left-0 {
    left: 0;
}
.left-2 {
    left: 0.5rem;
}
.bottom-0 {
    bottom: 0;
}
.bottom-2 {
    bottom: 0.5rem;
}
.tooltip-popin {
    animation: tooltippopin 0.2s ease;
}
.rounded {
    border-radius: 0.25rem;
}
.rounded-xl {
    border-radius: 0.5rem;
}
.rounded-2xl {
    border-radius: 1rem;
}
.rounded-3xl {
    border-radius: var(--mobile-border-radius-extra-large); /* 24px */
}
.opacity-0 {
    opacity: 0;
}
.opacity-50 {
    opacity: 0.5;
}
.opacity-100 {
    opacity: 1;
}
.gap-1 {
    gap: 0.25rem;
}
.gap-2 {
    gap: 0.5rem;
}
.gap-3 {
    gap: 0.75rem;
}
.gap-4 {
    gap: 1rem;
}
.gap-6 {
    gap: 1.5rem;
}
.pointer-events-none {
    pointer-events: none;
}
.select-text {
    user-select: text;
    -webkit-user-select: text;
}
.select-none {
    user-select: none;
    -webkit-user-select: none;
}
.object-cover {
    object-fit: cover;
}
.shimmer {
    animation: shimmer 10s linear infinite;
    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0) 42%,
        var(--surface-highlight-1) 47.5%,
        var(--surface-highlight-1) 50%,
        var(--surface-highlight-1) 52.5%,
        rgba(0, 0, 0, 0) 58%,
        rgba(0, 0, 0, 0) 100%
    );
    background-size: 800% 100%;
    background-color: var(--surface-grey-6);
}
.vert-separator {
    width: 1px;
    height: 65%;
    background-color: var(--mobile-border-strong);
}
.underline {
    text-decoration: underline;
}
.underline-offset-4 {
    text-decoration: underline;
    text-decoration-line: underline;
    text-underline-offset: 4px;
}
.line-through {
    text-decoration: line-through;
}
.box-border {
    box-sizing: border-box;
}
.separator-before::before {
    content: "";
    position: absolute;
    background-color: var(--mobile-border-strong);
    width: 1px;
    height: 100%;
    top: 0;
    left: 0;
}
.focus-border-strong:focus,
.focus-within-border-strong:focus-within {
    border-color: var(--mobile-border-strong-selected);
}
@keyframes shimmer {
    from {
        background-position: 0% 0;
    }
    to {
        background-position: -800% 0;
    }
}
@keyframes dialogpopin
{
    from {
        opacity: 0;
        margin-top: 30px;
    }
    to {
        opacity: 1;
        margin-top: 0;
    }
}

@keyframes tooltippopin
{
    from {
        opacity: 0;
        margin-top: 5px;
    }
    to {
        opacity: 1;
        margin-top: 0;
    }
}

@keyframes fadein
{
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@media screen and (max-width: 565px) {
    .flex-row.flex-sm-col {
        flex-direction: column;
    }
    .grid.grid-sm-col {
        grid-template-columns: none;
    }
}

@media screen and (max-width: 702px) {
    .flex-row.flex-md-col {
        flex-direction: column;
    }
}
